<template>
  <view class="score-circle-container">
    <!-- 圆环进度条容器，利用伪元素或 canvas 等实现，这里用简单的背景模拟示意，实际可优化为更精准的环形进度 -->
    <view
        class="circle-bg"
        :style="{ background: `conic-gradient(from 90deg, #409eff ${progress}%, #eee 0%)` }"
    >
      <view class="circle-content">
        <text class="score-text">{{ score }}分</text>
        <text class="rating-text" :style="{ color: ratingColor }">{{ rating }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
// 接收外部传入的分数
const props = defineProps({
  score: {
    type: Number,
    required: true,
    default: 0
  },
  mnksExamPassScore: {
    type: Number,
    required: true,
    default: 0
  },
  correctNumber: {
    type: Number,
    required: true,
    default: 0
  },
  totalNumber: {
    type: Number,
    required: true,
    default: 0
  }
});

// 根据分数计算进度（假设满分10分，可根据实际场景调整，比如100分制的话逻辑要变）
const progress = computed(() => (props.correctNumber / props.totalNumber) * 100);
// 根据分数判断评级文字和颜色
const rating = computed(() => {
  if (props.score >= props.mnksExamPassScore) {
    return '合格';
  }
  return '不及格';
});
const ratingColor = computed(() => rating.value === '不及格' ? 'red' : 'green');
</script>

<style scoped>
.score-circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-bg {
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-content {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.score-text {
  font-size: 20px;
  font-weight: bold;
}
.rating-text {
  font-size: 12px;
}
</style>